<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车辆归还</title>
<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
<script type="text/javascript"
	src="${root}/static/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
	<div id="app" class="container-fluid">
		<div class="col-md-2" style="margin-top: 20px">
			<input type="text" v-model="rtid" @keyup="search()"
				placeholder="请输入租赁单号关键字" class="form-control" />
		</div>
		<div class="col-md-2" style="margin-top: 20px">
			<button @click="all()"
				class="btn btn-default glyphicon glyphicon-search">所有租赁单</button>
		</div>
		<table class="table">
			<caption>租赁列表</caption>
			<thead>
				<tr>
					<th>出租单号</th>
					<th>身份证号</th>
					<th>车牌号</th>
					<th>出租价格</th>
					<th>出租押金</th>
					<th>超期价格</th>
					<th>起租时间</th>
					<th>归还时间</th>
					<th>租赁状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in pager.items">
					<td>{{item.rtid}}</td>
					<td>{{item.rtctid}}</td>
					<td>{{item.rtbsno}}</td>
					<td>{{item.rtprice}}元/天</td>
					<td>{{item.rtdeposit}}元</td>
					<td>{{item.rtextprice}}元</td>
					<td>{{item.rtbeginS}}</td>
					<td>{{item.rtreturnS}}</td>
					<td>{{item.rtstatuszh}}</td>
					<td v-if="item.rtstatus == 601"><a
						@click="returnBus(item.rtid)" href="javascript:void(0);">
							<button class="btn btn-info">归还</button>
					</a></td>
					<td v-if="item.rtstatus == 602"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">已归档</button>
					</a></td>
					<td v-if="item.rtstatus == 603"><a href="javascript:void(0);">
							<button class="btn btn-info" disabled="disabled">请及时顾客还车</button>
					</a></td>
					<td v-if="item.rtstatus == 604"><a href="javascript:void(0);">
							<button class="btn btn-info">已过期</button>
					</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="10">
						<ul class="pagination">
							<li><a href="javascript:void(0);" @click="list(1)">&laquo;</a></li>
							<li><a href="javascript:void(0);"
								@click="list(pager.begin-pager.step)">&larr;</a></li>
						</ul>
						<ul class="pagination" v-for="n in pager.end+1-pager.begin">
							<li :class="pager.begin+n-1==pager.index?'active':''"><a
								href="javascript:void(0);" @click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
							</li>
						</ul>
						<ul class="pagination">
							<li><a href="javascript:void(0);"
								@click="list(pager.begin+pager.step)">&rarr;</a></li>
							<li><a href="javascript:void(0);" @click="list(pager.page)">&raquo;</a></li>
						</ul>
					</td>
				</tr>
			</tfoot>
		</table>
		<div id="mymodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">{{title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择还车类型:</label>
								<div class="col-sm-4">
									<select id="rnreturn" @change="getReturnType()" class="form-control" >
										<option v-for="returnType in returnTypes" :value="returnType.id">{{returnType.text}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">归还备注:</label>
								<div class="col-sm-4">
									<textarea id="rndesc" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">归还备注不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="submit" class="btn btn-default" value="确定"
										@click="save()" /> <input type="button" data-dismiss="modal"
										class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="repairmodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">{{title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择维修项:</label>
								<div class="col-sm-4">
									<select id="rrproblem" multiple="multiple"
										v-model="checkRepairs" class="form-control">
										<option v-for="repair in repairs" :value="repair.dtvalue">{{repair.dtvalue}}</option>
									</select>
								</div>
								<p class="col-sm-4 help-block">维修项不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">维修费用:</label>
								<div class="col-sm-4">
									<input type="text" id="rrcost" pattern="^[1-9]\d{4,9}$"
										class="form-control" required placeholder="请输入维修费用(5-10位数字)" />
								</div>
								<p class="col-sm-4 help-block">维修费用不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">维修说明:</label>
								<div class="col-sm-4">
									<textarea id="rrdesc" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">维修说明不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="submit" class="btn btn-default" value="确定"
										@click="repair()" /> <input type="button"
										data-dismiss="modal" class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="checkmodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">{{title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择违规项:</label>
								<div class="col-sm-4">
									<select id="ckproblem" multiple="multiple" v-model="checkChecks" class="form-control">
										<option v-for="ck in checks" :value="ck.dtvalue">{{ck.dtvalue}}</option>
									</select>
								</div>
								<p class="col-sm-4 help-block">违规项不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">违规说明:</label>
								<div class="col-sm-4">
									<textarea id="ckdesc" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">违规说明不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="submit" class="btn btn-default" value="确定"
										@click="ck()" /> <input type="button"
										data-dismiss="modal" class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="repaircheckmodal" class="modal">
			<div class="modal-dialog" data-backdrop="static">
				<div class="modal-content">
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<h4 id="title">{{title}}</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" @submit.prevent method="post">
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择维修项:</label>
								<div class="col-sm-4">
									<select id="rrproblem1" multiple="multiple"
										v-model="checkRepairs" class="form-control">
										<option v-for="repair in repairs" :value="repair.dtvalue">{{repair.dtvalue}}</option>
									</select>
								</div>
								<p class="col-sm-4 help-block">维修项不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">维修费用:</label>
								<div class="col-sm-4">
									<input type="text" id="rrcost1" pattern="^[1-9]\d{4,9}$"
										class="form-control" required placeholder="请输入维修费用(5-10位数字)" />
								</div>
								<p class="col-sm-4 help-block">维修费用不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">维修说明:</label>
								<div class="col-sm-4">
									<textarea id="rrdesc1" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">维修说明不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">请选择违规项:</label>
								<div class="col-sm-4">
									<select id="ckproblem1" multiple="multiple" v-model="checkChecks" class="form-control">
										<option v-for="ck in checks" :value="ck.dtvalue">{{ck.dtvalue}}</option>
									</select>
								</div>
								<p class="col-sm-4 help-block">违规项不能为空</p>
							</div>
							<div class="form-group">
								<label class="col-sm-4 control-label text-right">违规说明:</label>
								<div class="col-sm-4">
									<textarea id="ckdesc1" rows="5" cols="10" class="form-control"
										required></textarea>
								</div>
								<p class="col-sm-4 help-block">违规说明不能为空</p>
							</div>
							<div class="form-group">
								<div class="col-sm-4 col-sm-offset-4">
									<input type="submit" class="btn btn-default" value="确定"
										@click="repaircheck()" /> <input type="button"
										data-dismiss="modal" class="btn btn-default" value="取消" />
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el : '#app',
			data : {
				index : 1,
				size : 5,
				step : 10,
				rtid : "",
				pager : {},
				repairs : {},
				checks:{},
				checkRepairs : [],
				checkChecks : [],
				title : "",
				id : "",
				returnTypes : {}
			},
			created : function() {
				var self = this;
				self.returnTypes = [ {
					text : '正常',
					id : 1
				}, {
					text : '维修',
					id : 2
				}, {
					text : '违规',
					id : 3
				}, {
					text : '维修且违规',
					id : 4
				}, ];
			},
			methods : {
				list : function(index) {
					var self = this;
					self.index = index;
					var url = "${root}/rent/list?rtid=" + self.rtid + "&index="
							+ self.index + "&size=" + self.size + "&step="
							+ self.step;
					axios.get(url).then(function(res) {
						self.pager = res.data;
					});
				},
				search : function() {
					var self = this;
					self.index = 1;
					self.list(self.index);
				},
				all : function() {
					var self = this;
					self.rtid = "";
					self.index = 1;
					self.list(self.index);
				},
				getRepairs : function() {
					var self = this;
					var url = "${root}/dict/list?tid=11";
					axios.get(url).then(function(res) {
						self.repairs = res.data
					});
				},
				getChecks : function() {
					var self = this;
					var url = "${root}/dict/list?tid=12";
					axios.get(url).then(function(res) {
						self.checks = res.data
					});
				},
				returnBus : function(id) {
					var self = this;
					self.id = id;
					self.title = "还车";
					$("#mymodal").modal("show");
					$("#rndesc").val("");
					$("#rrcost").val("");
					$("#rrdesc").val("");
					$("#ckdesc").val("");
					
					$("#rrcost1").val("");
					$("#rrdesc1").val("");
					$("#ckdesc1").val("");
				},
				getReturnType : function() {
					var self = this;
					var ck = $("#rnreturn").val();
					if (ck == 2) {
						$("#mymodal").modal("hide");
						$("#repairmodal").modal("show");
						self.title = "维修";
						$("#rnreturn").val("1");
					} else if (ck == 3) {
						$("#mymodal").modal("hide");
						$("#checkmodal").modal("show");
						self.title = "违规";
						$("#rnreturn").val("1");
					} else if (ck == 4) {
						$("#mymodal").modal("hide");
						$("#repaircheckmodal").modal("show");
						self.title = "维修且违规";
						$("#rnreturn").val("1");
					}
				},
				save : function() {
					var self = this;
					var rndesc = document.getElementById("rndesc");
					if (rndesc.validity.valueMissing) {
						rndesc.setCustomValidity("归还备注不能为空");
					} else {
						rndesc.setCustomValidity("");
						var url = "${root}/return/add";
						var fd = new FormData();
						fd.append("rnrtid", self.id);
						fd.append("rndesc", rndesc.value);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#mymodal").modal("hide");
							self.list(self.index);
						});
					}
				},
				repair : function() {
					var self = this;
					var count = 0;
					var rrcost = document.getElementById("rrcost");
					var rrdesc = document.getElementById("rrdesc");

					if (self.checkRepairs.length == 0) {
						rrproblem.setCustomValidity("维修项不能为空");
					} else {
						rrproblem.setCustomValidity("");
						count++;
					}

					if (rrcost.validity.valueMissing) {
						rrcost.setCustomValidity("维修费用不能为空");
					} else {
						rrcost.setCustomValidity("");
						count++;
					}

					if (rrdesc.value.length == 0) {
						rrdesc.setCustomValidity("维修说明不能为空");
					} else {
						rrdesc.setCustomValidity("");
						count++;
					}

					if (count == 3) {
						var url = "${root}/repair/add";
						var fd = new FormData();
						fd.append("rnrtid", self.id);
						fd.append("rrproblem", self.checkRepairs);
						fd.append("rrcost", rrcost.value);
						fd.append("rrdesc", rrdesc.value);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#repairmodal").modal("hide");
							self.list(self.index);
						});
					}
				},
				ck : function() {
					var self = this;
					var count = 0;
					var ckdesc = document.getElementById("ckdesc");

					if (self.checkChecks.length == 0) {
						ckproblem.setCustomValidity("违规项不能为空");
					} else {
						ckproblem.setCustomValidity("");
						count++;
					}

					if (ckdesc.value.length == 0) {
						ckdesc.setCustomValidity("违规说明不能为空");
					} else {
						ckdesc.setCustomValidity("");
						count++;
					}

					if (count == 2) {
						var url = "${root}/check/add";
						var fd = new FormData();
						fd.append("rnrtid", self.id);
						fd.append("ckproblem", self.checkChecks);
						fd.append("ckdesc", ckdesc.value);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#checkmodal").modal("hide");
							self.list(self.index);
						});
					}
				},
				repaircheck:function(){
					var self = this;
					var count = 0;
					var rrcost = document.getElementById("rrcost1");
					var rrdesc = document.getElementById("rrdesc1");
					var ckdesc = document.getElementById("ckdesc1");

					if (self.checkRepairs.length == 0) {
						rrproblem1.setCustomValidity("维修项不能为空");
					} else {
						rrproblem1.setCustomValidity("");
						count++;
					}

					if (rrcost1.validity.valueMissing) {
						rrcost1.setCustomValidity("维修费用不能为空");
					} else {
						rrcost1.setCustomValidity("");
						count++;
					}

					if (rrdesc1.value.length == 0) {
						rrdesc1.setCustomValidity("维修说明不能为空");
					} else {
						rrdesc1.setCustomValidity("");
						count++;
					}
					
					if (self.checkChecks.length == 0) {
						ckproblem1.setCustomValidity("违规项不能为空");
					} else {
						ckproblem1.setCustomValidity("");
						count++;
					}

					if (ckdesc1.value.length == 0) {
						ckdesc1.setCustomValidity("违规说明不能为空");
					} else {
						ckdesc1.setCustomValidity("");
						count++;
					}

					if (count == 5) {
						var url = "${root}/repaircheck/add";
						var fd = new FormData();
						fd.append("rnrtid", self.id);
						fd.append("rrproblem", self.checkRepairs);
						fd.append("rrcost", rrcost1.value);
						fd.append("rrdesc", rrdesc1.value);
						fd.append("ckproblem", self.checkChecks);
						fd.append("ckdesc", ckdesc1.value);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							$("#repaircheckmodal").modal("hide");
							self.list(self.index);
						});
					}
				}
			},
			mounted : function() {
				this.list(this.index);
				this.getRepairs();
				this.getChecks();
			}
		})
	</script>
</body>
</html>